<template>
  <div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      :width="dialogWidth"
      :lock-scroll="false"
      :before-close="handleClose"
      :style="{'text-align' : textAlign}"
    >
      <!-- 扫码登录 -->
      <div class="col-dialog col-h-300" v-if="type === 0">
        <el-image :src="loginInfo.qrCodeUrl">
          <div slot="error" class="image-slot">
            <i class="icon el-icon-loading"></i>
          </div>
        </el-image>
        <div class="col-dialog-text">
          <span @click="getWxLogin()">刷新二维码</span>
          <span @click="handleTo">密码登录</span>
        </div>
      </div>
      <!-- 绑定手机号 -->
      <div class="col-dialog" v-if="type === 1">
        <Phone ref="refPhone" :dialogWidth.sync="dialogWidth" @change="changeType" />
      </div>
      <!-- 添加客户经理 -->
      <!-- <div class="col-dialog col-h-300" v-if="type === 2">
        <img :src="QrCode" alt="">
        <div class="col-dialog-text">扫码添加客户经理微信</div>
      </div> -->
    </el-dialog>

    <Menu ref="refMenu" />
  </div>
</template>
<script>
import { getQRCodeUrl, checkLogin } from '@/api/login'
import { setToken } from '@/utils/auth'
import QrCode from '@/assets/img/common/QrCode.png'
import Phone from './Phone.vue'
import Menu from './Menu.vue'

export default {
  name: "LoginDialog",
  components: { Phone, Menu },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
  },
  created() {
    this.getPlatform()
  },
  data() {
    return {
      // 弹窗标题
      dialogTitle: '微信扫码关注公众号进行登录',
      // 弹窗宽度-适配移动端
      dialogWidth: '28%',
      textAlign: 'center',
      // 微信扫码登录-轮询定时器
      timer: null,
      // 微信扫码登录-轮询次数-三分钟后关闭轮询
      timerNum: 0,
      // 弹窗类型:0=微信扫码登录,1=手机号绑定,2=添加客户经理二维码
      type: 0,
      // 客户经理二维码
      QrCode: QrCode,
      // 微信扫码登录参数
      loginInfo: {
        qrCodeUrl: null,
        ticket: null
      },
    };
  },
  methods: {
    // 获取微信扫码登录二维码
    getWxLogin(timerNum = 0) {
      this.getPlatform()
      getQRCodeUrl().then((res)=> {
        if(res.code === 200) {
          this.loginInfo = res.data
          this.timerNum = timerNum
          // 开启定时器轮询
          clearInterval(this.timer)
          this.timer = setInterval(() => {
            this.timerNum ++ 
            if(this.timerNum === 55 || this.timerNum === 110) {
              // 刷新二维码-二维码有效期60秒
              this.getWxLogin(this.timerNum)
            }else
            // 165秒未操作停止轮询
            if(this.timerNum >= 165) {
              this.handleClose()
            }
            this.checkLogin()
          }, 1000);
        }
      })
    },
    // 轮询查询是否扫码完成
    checkLogin() {
      checkLogin({ ticket: this.loginInfo.ticket }).then((res)=> {
        if(res.code === 200) {
          clearInterval(this.timer);
          const { state, token, pmsLoginUrl } = res.data
          setToken(token)
          // 1跳转手机号码验证
						if(state === '1') {
              this.type = 1
              this.dialogTitle = '绑定手机号'
              this.textAlign = 'left'
						}else if(state === '2') { // 2登录成功，展示假菜单(小程序中需要提醒客户开通账户) 
              // this.$message.warning({ showClose: true, duration: 10000, title: '消息', message: '登录成功，请扫码添加客户经理开通账号~' });
							// this.type = 2
              // this.dialogTitle = '请添加客户经理微信'
              // this.textAlign = 'center'
              this.$message({ message: '登录成功', type: 'success' })
              setTimeout(() => {
                this.changeType()
              }, 500);
						}else if(state === '3') { // 3登录成功，返回跳转pmsLoginUrl
							// 跳转PMS
              if(pmsLoginUrl) {
                this.handleClose()
                window.open(pmsLoginUrl) 
              }
						}
        }
      }).catch(err=>{
        // 失败刷新二维码
        this.getWxLogin()
      })
    },
    // 密码登录
    handleTo() {
      window.open(process.env.VUE_APP_BASE_PMS) 
    },
    // 关闭弹窗
    handleClose() {
      this.timerNum = 0
      this.type = 0
      this.dialogTitle = '微信扫码关注公众号进行登录'
      this.textAlign = 'center'
      clearInterval(this.timer);
      this.$emit('closeSpecial')
    },
    // 绑定手机号成功回调
    changeType(e){
      this.$refs.refMenu.open()
      this.handleClose()
      // this.$message.warning({ showClose: true, duration: 10000, title: '消息', message: '登录成功，请扫码添加客户经理开通账号~' });
      // this.type = 2
      // this.dialogTitle = '请添加客户经理微信'
      // this.textAlign = 'center'
    },
    // 判断是pc还是手机(适配)
    getPlatform() {
      this.dialogWidth = this.isMobile() ? '80%' : '28%'
    },
    isMobile() {
      let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
      return flag;
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding-top: 0px !important;
}
@media (max-width: 767px) {
  .el-dialog {
    width: 80% !important;
    margin-top: 30vh !important;
  }
}
::v-deep .el-form-item {
  border-bottom: 1px solid #e7e8e8 !important
}
::v-deep .el-input__inner {
    border-radius: 0px;
    border-top-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
}
::v-deep .el-image {
  width: 310px;
  height: 310px;
}
.col-dialog {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  .icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  &-text {
    display: flex;
    justify-content: space-between;
    width: 260px;
    font-size: 14px;
    color: #1189FF;
    span {
      cursor: pointer;
    }
  }
  
  img {
    width: 310px;
    height: 310px;
    border: 1px solid #fff;
  }
}

// .col-h-300 {
  // height: 330px;
// }
// @media (max-width: 767px) {
  // .col-h-300 {
    // height: 310px !important;
  // }
// }
</style>
